<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Blast</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<style>
		*,*:after,*.before{box-sizing: border-box;}
		html{height:100%;}
		body{padding:0;margin:0;background-color: #eee;}
		body,textarea{font-family: 'Microsoft Yahei';}
		p{font-size: 14px;color:#666;margin-top: 15px}
		textarea{width:100%; height:200px;border:none;outline: none;resize:none;font-size: 14px;color:#666;}
		.container{max-width:1200px;margin:0 auto;top:0;bottom: 0;padding:0 15px 15px;}
		.box{border: solid 1px #ddd; background-color: #fff;padding:15px; margin-top: 15px;}
		.left,.right{float:left; width:50%; padding-bottom: 15px;}
		.left{padding-right: 15px;}
		.right{padding-left: 15px;}
		.html,.result{height:236px; overflow: auto;}
	</style>
</head>
<body>
<div class="container">
	<div class="box">
		<button id="btn_inter">插值表达式</button>
		<button id="btn_eval">循环输出</button>
		<button id="btn_def">定义模板</button>
		<button id="btn_filter">过滤器</button>
	</div>
	<div class="left">
		<p>模板</p>
		<div class="box">
			<textarea id="tempCont"></textarea>
		</div>
		<p>数据</p>
		<div class="box">
			<textarea id="dataCont"></textarea>
		</div>
		
	</div>
	<div id="cont"></div>
</div>
<script src="speed/js/jquery-1.7.2.min.js"></script>
<script src="../dist/blast.js"></script>
<script type="text/html" id="tpl">
	<div class="right">
		<p>显示结果</p>
		<div class="box result">{{-tplResult}}</div>
		<p>HTML</p>
		<div class="box html">{{=tplHtml}}</div>
	</div>
</script>

<!-- 插值表达式 -->
<script type="text/html" id="interTmpl">
<div>Hello 'word "ssss" \{\{a\}\}' \{\{sss\}\} - {{= Name}}</div>	
</script>

<!-- 循环输出 -->
<script type="text/html" id="evalTmpl">
{{#def.fname
	{{= Name}}
#}}
{{ for(var i=0,len=List.length; i<len; i++) {}}
	<div>{{#use.fname List[i]}} / {{= List[i].Age}}</div>
{{ } }}
</script>

<!-- 定义模板 -->
<script type="text/html" id="defTmpl">
{{#def.header
	{{= q.Title}} - {{- DX}}
#}}
{{#def.content
	<p>{{= Content}}</p>
#}}
<div>
	{{#use.header {
		q: q,
		DX: 1500
	} }}
	{{#use.content q}}
</div>
</script>

<!-- 过滤器 -->
<script type="text/html" id="filterTmpl">
字符串
<ul>
	<li>转义(等价于\{\{=esStr\}\})：{{-esStr | escape}}</li>
	<li>全部转换为大写：{{-Content | upper}}</li>
	<li>全部转换为小写：{{-UpperCont + Content | lower}}</li>
	<li>每个单词首字母转换为大写：{{-Content | upper true}}</li>
	<li>清除首尾空白：{{-Content | trim}}</li>
	<li>替换：{{-Content | replace 'Blast' 'Blast JS模板引擎'}}</li>
	<li>截断字符串：{{-Content | truncate 6}}</li>
	<li>默认字符：{{-Defaults | defaults '值为Null'}}</li>
</ul>
数组
<ul>
	<li>Join：{{-Arr | join }}</li>
	<li>First：{{-Arr | eq 0}}</li>
	<li>Last：{{-Arr | eq 'last'}}</li>
</ul>
</script>
<script>
	var defauts = "inter";
	var $cont = $('#cont');
	var $tempCont = $('#tempCont');
	var $dataCont = $('#dataCont');
	var tplData = {
		tplTemp: '',
		tplData: '',
		tplHtml: '',
		tplResult: ''
	};

	var tmp = {
		inter: {
			tplTemp: $c('interTmpl'),
			tplData: '{Name: "Blast"}'
		},
		eval: {
			tplTemp: $c('evalTmpl'),
			tplData: '{List: [{Name: "TOM", Age: 30}, {Name: "DON", Age:32}, {Name:"Mick", Age: 48}]}'
		},
		def: {
			tplTemp: $c('defTmpl'),
			tplData: '{q:{Title: "Blast", Content: "高性能Javascript模板引擎."}}'
		},
		filter: {
			tplTemp: $c('filterTmpl'),
			tplData:'{'+
						'esStr: "<script>alert(1)<\/script>",'+
						'Content: " Blast ",'+
						'Arr: [4,3,1,7,9],'+
						'Defaults: null,'+
						'UpperCont: "UPPERCASE TO LOWERCASE"'+
					'}'
		}
	};

	function run(flag) {
		var init = tmp[defauts];
		var t = {};
		var data;
		if( flag ) {
			tplData.tplTemp = t.tplTemp = $tempCont.val();
			tplData.tplData = t.tplData = $dataCont.val();
		}
		else if( init ) {
			$tempCont.val(t.tplTemp = init['tplTemp']);
			$dataCont.val(t.tplData = init['tplData']);
		}

		for( var it in tplData ) {
			tplData[it] = t[it];
		}
		data = new Function('return '+t.tplData)();
		tplData.tplHtml = tplData.tplResult = Blast(null, data, {template: t.tplTemp});
		$cont.html( Blast('#tpl', tplData) );
	}

	function $c(id) {
		var ret = document.getElementById(id).innerHTML;
		return ret ? ret.replace(/(^\s|\s$)+/g, '') : '';
	}
	
	function init() {
		run();
		$('button[id^="btn"]').click(function() {
			defauts = this.id.replace('btn_', '');
			run();
		});
		$tempCont.keyup(function(e) {run(true) });
	}
	// 初始化
	$(init);
</script>
</body>
</html>